.fa-tabbar {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	background: var(--wot-bg-color);
	height: var(--wot-tabbar-height);
	padding-bottom: var(--wot-area-inset-bottom);
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	border-top: 1px solid var(--wot-color-border-light);
	.wd-icon,
	.iconfont,
	.item__title {
		transition:
			color 0.3s ease,
			background 0.3s ease;
	}
	.fa-tabbar-item {
		position: relative;
		flex: 1;
		text-align: center;
		text-decoration: none;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.fa-icon {
			font-size: 20px;
			color: var(--wot-color-title);
		}
		.item__title {
			font-size: 14px;
			color: var(--wot-color-title);
		}
		.wd-icon-home,
		.iconfont-report,
		.wd-icon-user {
			font-weight: var(--wot-font-weight-primary);
		}
		&.is-active {
			.wd-icon,
			.iconfont,
			.item__title {
				color: var(--wot-color-primary);
			}
		}
		.item__lock {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 25px;
			color: var(--wot-color-info);
			background-color: var(--wot-mask-color);
			z-index: 2;
		}
		.fa-icon-lock {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: var(--wot-mask-color);
			z-index: 11;
		}
	}
	.fa-tabbar-item__bulge {
		.item__bulge-warp {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			z-index: 3;
			.wd-icon,
			.iconfont {
				margin-top: -13px;
				width: 40px;
				height: 40px;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				background: var(--wot-color-info);
				&::before {
					color: var(--wot-color-white);
				}
			}
		}
		&::before {
			content: "";
			position: absolute;
			top: -12px;
			left: 50%;
			transform: translateX(-50%);
			width: 45px;
			height: 44px;
			border-radius: 50%;
			background: var(--wot-bg-color);
			border: solid var(--wot-color-border-light);
			border-width: 1px 1px 0;
			z-index: 1;
		}
		&::after {
			content: "";
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 47px;
			height: 30px;
			border-radius: 0 0 50% 50%;
			background: var(--wot-bg-color);
			z-index: 2;
		}
		&.is-active {
			.wd-icon,
			.iconfont {
				background: var(--wot-color-primary);
			}
		}
	}
}
